<template>
  <view class="index">
    <nut-input v-model="searchedMac" clearable center placeholder="请输入MAC">
      <template #button>
        <nut-button
          plain
          size="small"
          type="primary"
          icon="search"
          @click="searchMac"
          >搜索</nut-button
        >
        &nbsp;或<nut-button
          plain
          size="small"
          type="primary"
          icon="scan"
          @click="scanMac"
          >扫码</nut-button
        >
      </template>
    </nut-input>

    <nut-grid v-if="devices.length > 0" :border="false" clickable>
      <nut-grid-item
        v-for="d in devices"
        :key="d.id"
        @click="selectDeviceToAdd(d)"
      >
        <div class="device">
          <img
            :src="
              d.img ||
              'cloud://dev-304ml.6465-dev-304ml-1300481250/device/device.png'
            "
          />
          <div class="name">
            <nut-tag plian class="cate">{{ d.categoryName }}</nut-tag>
            {{ d.productName }}
          </div>
          <div class="name">MAC:&nbsp;{{ d.deviceName }}</div>
        </div>
      </nut-grid-item>
    </nut-grid>
    <nut-empty v-else description="暂无设备，快去添加吧"></nut-empty>
  </view>

  <nut-popup
    pop-class="popclass"
    v-model:visible="showAddDeviceDialog"
    :z-index="100"
  >
    <h2>房间添加设备</h2>
    <nut-form v-model="addDeviceForm">
      <nut-form-item label="所在房间" label-width="80px">
        {{ addDeviceForm.spaceName }}
      </nut-form-item>
      <nut-form-item label="设备命名" label-width="80px">
        <input
          class="nut-input-text"
          v-model="addDeviceForm.name"
          placeholder="给设备指定个名字吧"
          type="text"
        />
      </nut-form-item>
      <nut-row style="margin-top: 10px; text-align: center">
        <nut-col :span="12">
          <nut-button type="primary" size="small" @click="saveAddDevice"
            >保存</nut-button
          >
        </nut-col>
        <nut-col :span="12">
          <nut-button size="small" @click="showAddDeviceDialog = false"
            >取消</nut-button
          >
        </nut-col>
      </nut-row>
    </nut-form>
  </nut-popup>
</template>

<script>
import Taro, { getCurrentPages } from "@tarojs/taro";
import { reactive, toRefs, ref } from "vue";
import httpService from "../../services/httpService";

export default {
  name: "Index",
  components: {},
  mounted() {},
  setup() {
    const state = reactive({});
    const searchedMac = ref("");
    const params = Taro.getCurrentInstance().router.params;

    const devices = ref([]);

    function searchMac() {
      httpService
        .get("/space/findDevice", { params: { mac: searchedMac.value } })
        .then((res) => {
          if (res.statusCode == 200) {
            devices.value = res.data;
          }
        });
    }

    function scanMac() {
      Taro.scanCode();
    }

    const showAddDeviceDialog = ref(false);
    const addDeviceForm = ref({
      spaceId: params.spaceId,
      spaceName: params.spaceName,
      deviceId: "",
      name: "",
    });

    function selectDeviceToAdd(device) {
      showAddDeviceDialog.value = true;
      addDeviceForm.value.deviceId = device.deviceId;
      addDeviceForm.value.name =
        addDeviceForm.value.spaceName + "的" + device.productName;
    }

    function saveAddDevice() {
      httpService
        .post("/space/addDevice", { params: addDeviceForm.value })
        .then((res) => {
          if (res.statusCode == 200) {
            showAddDeviceDialog.value = false;
            let idx = devices.value.findIndex(
              (d) => d.deviceId == addDeviceForm.value.deviceId
            );
            if (idx >= 0) {
              devices.value.splice(idx, 1);
            }
          }
        });
    }

    return {
      state,
      devices,
      searchMac,
      searchedMac,
      scanMac,
      selectDeviceToAdd,
      showAddDeviceDialog,
      saveAddDevice,
      addDeviceForm,
    };
  },
};
</script>

<style lang="scss">
.device {
  max-width: 45vw;
  height: 110px;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.1);
  text-align: center;
  color: #333;
  img {
    max-width: 50%;
    max-height: 50%;
  }
  .name {
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
    .cate {
      font-size: 10px;
    }
  }
}
.popclass {
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}
</style>
